<!DOCTYPE HTML>
<html>
<head>
<title>碎言碎语 — 一个站在java开发之路上的草根程序员个人博客网站</title>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="keywords" content="个人博客,XXX个人博客,个人博客系统,XXX博客,XXX">
<meta name="description" content="Lao王博客系统，一个站在java开发之路上的草根程序员个人博客网站。">
<LINK rel="Bookmark" href="images/favicon.ico" >
<LINK rel="Shortcut Icon" href="images/favicon.ico" />

<link rel="stylesheet" type="text/css" href="plugin/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="plugin/Hui-iconfont/1.0.8/iconfont.min.css" />
<link rel="stylesheet" type="text/css" href="css/commons.css" />
<link rel="stylesheet" type="text/css" href="plugin/pifu/pifu.css" />
<link rel="stylesheet" type="text/css" href="css/timeline.css" />
	<style>
		p{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3; //需要控制的文本行数
		overflow: hidden;
		}
	</style>
	<script src="js/jquery-3.3.1.min.js"></script>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } function showSide(){$('.navbar-nav').toggle();}</script>
<script>
	$(function () {
        //查询是否登录
        $.ajax({
            url:"/CustomersSession",
            type:"post",
            dataType:"text",
            data:"",
            success:function (data) {
                if(data!=""&&data!=null)
                {
                    $("#login").text(data);
                }
            },
            error:function (data) {
                console.log("错误"+data.status);
            }
        });
        //登录
        $("#login").click(function () {
            if ($(this).text() === "未登录") {
                location.href = "/login.html";
            } else {
                //个人中心
                //alert($(this).text());
                $("#modal-demo").modal("show")
            }
        });
        //加载时先绑定用户信息
        $.ajax({
            url: "/SelectUserName",
            type: "post",
            dataType: "json",
            data: "",
            success: function (data) {
                console.log(data.name);
                $("#User_Name").val(data.name);
                $("#User_email").val(data.email);
                $("#User_address").val(data.address);
                $("#User_occupation").val(data.occupation);
                $("#User_telephone").val(data.telephone);
                $("input[type=radio][name=sex][value="+data.sex+"]").attr("checked", true);
            }, error: function (data) {
                console.log("错误" + data.status);
            }
        });
        //绑定时间轴
        $.ajax({
			url:"/SelectJournalTen",
			type:"get",
			dataType:"json",
			data:"",
			success:function (data) {
				for(var i=0;i<data.length;i++)
				{
                    $(".timeline").append('<div class="cd-timeline-block">' +
						' <div class="cd-timeline-img cd-picture">' +
						' <img src="css/timeline/cd-icon-location.svg" alt="position">' +
						'</div>' +
						'<div class="cd-timeline-content">' +
						'<h4>'+data[i].title+'</h4>' +
						'<p>'+data[i].content+'</p>' +
						'<a href="article_detail.html?id='+data[i].id+'" class="f-r"><input class="btn btn-success size-S" type="button" value="更多"></a>' +
						' <span class="cd-date">'+changeDateFormat(data[i].time)+'</span>' +
						'</div>' +
						'</div>');
				}

            },
			error:function (data) {
				console.log("错误"+data.status);
            }
		})
    })
    //修改密码信息
    function fun() {
        if ($("#User_password").val() !== $("#User_NewPassword").val()) {
            $("#error").text("两次密码不一致");
            return;
        } else {
            $("#error").text("");


            if ($("#User_password").val() !== "") {
                //保存修改密码
                $.ajax({
                    url: "/UpdateUserPassword",
                    type: "post",
                    dataType: "text",
                    data: {
                        OriginalPassword: $("#User_Ypassword").val(),
                        NewPassword: $("#User_password").val()
                    },
                    success: function (data) {
                        if (data == "ok") {
                            // alert("密码修改成功，请重新登录");
                            //
                            UpdateUser();
                            //location.href = "/login.html";
                        } else {
                            $("#error").text(data.toString());
                            return;
                        }
                    },
                    error: function (data) {
                        alert("错误" + data.status);
                    }

                });
            }else
            {
                UpdateUser();
            }

        }

    };

    //修改信息
    function UpdateUser() {
        $.ajax({
            url: "/UpdateUser",
            type: "post",
            dataType: "text",
            data: {
                name: $("#User_Name").val(),
                sex: $('input:radio[name="sex"]:checked').val(),
                email: $("#User_email").val(),
                address: $("#User_address").val(),
                occupation: $("#User_occupation").val(),
                telephone: $("#User_telephone").val()
            },
            success: function (data) {
                if (data === "ok") {
                    alert("修改成功");
                    $("#modal-demo").modal("hide");
                    $("#User_Ypassword").val("")
                    $("#User_password").val("")
                    $("#User_NewPassword").val("")

                } else {
                    $("#error").text(data.toString());
                }
            },
            error: function (data) {
                alert("错误" + data.status);
            }

        });
    };
    //转换日期格式(时间戳转换为datetime格式)
    function changeDateFormat(cellval) {
        var dateVal = cellval + "";
        if (cellval != null) {
            var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
        }
    };
</script>
</head>
<body>
<header class="navbar-wrapper">
    <div class="navbar navbar-fixed-top">
        <div class="container cl">
            <a class="navbar-logo hidden-xs" href="/">
                <img class="logo" src="images/logo.png" alt="博客" />
            </a>
            <a class="logo navbar-logo-m visible-xs" href="index.html">博客</a>
            <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:void(0);" onclick="showSide();">&#xe667;</a>
            <nav class="nav navbar-nav nav-collapse w_menu" role="navigation">
                <ul class="cl">
                    <li class="active"> <a href="index.html" data-hover="首页">首页</a> </li>
                    <li> <a href="about.html" data-hover="关于我">关于我</a> </li>
                    <li> <a href="mood.html" data-hover="碎言碎语">碎言碎语</a> </li>
                    <li><a href="article.html" data-hover="学无止尽">学无止尽</a></li>
                    <li> <a href="board.html" data-hover="留言板">留言板</a> </li>
                </ul>
            </nav>
            <nav class="navbar-nav navbar-userbar hidden-xs hidden-sm " style="top: 0;">
                <ul class="cl">
                    <li class="userInfo dropDown dropDown_hover">
                            <!--<a href="javascript:;" ><img class="avatar radius" src="images/40.jpg" alt="丶似浅 "></a>
                            <ul class="dropDown-menu menu radius box-shadow">
                                <li><a href="/app/loginOut">退出</a></li>
                            </ul>-->
						<a href="#" id="login">未登录</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<!--导航条-->
<nav class="breadcrumb">
    <div class="container"><i class="Hui-iconfont">&#xe67f;</i> <a href="index.html" class="c-primary">首页</a> <span class="c-gray en">&gt;</span> <span class="c-gray">碎言碎语</span></div>
</nav>

<section class="container mt-20">
    <div class="container-fluid">
        <div class="timeline">
        	

        </div>
    </div>

</section>
<footer class="footer mt-20">
    <div class="container-fluid" id="foot">
        <p>Copyright &copy; 2020
            
        </p>
    </div>
</footer>
<div id="modal-demo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content radius">
            <div class="modal-header">
                <h3 class="modal-title">修改个人信息</h3>
                <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void(0);">×</a>
            </div>
            <div class="modal-body">
                <!--p>对话框内容…</p>-->
                <form action="" method="post" class="form form-horizontal" id="demoform-1">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3">昵称：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="text" class="input-text" autocomplete="off" placeholder="昵称" id="User_Name">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3">性别：</label>
                        <div class="formControls skin-minimal col-xs-8 col-sm-9">
                            <div class="radio-box">
                                <input type="radio" id="sex-1" name="sex" value="1" checked>
                                <label for="sex-1">男</label>
                            </div>
                            <div class="radio-box">
                                <input type="radio" id="sex-0" name="sex" value="0">
                                <label for="sex-0">女</label>
                            </div>
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3">邮箱：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="text" class="input-text" autocomplete="off" placeholder="邮箱" id="User_email">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3">地址：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="text" class="input-text" autocomplete="off" placeholder="地址" id="User_address">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3">职业：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="text" class="input-text" autocomplete="off" placeholder="职业"
                                   id="User_occupation">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3">联系方式：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="text" class="input-text" autocomplete="off" placeholder="联系方式"
                                   id="User_telephone">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3">原密码：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="password" class="input-text" autocomplete="off" placeholder="原密码"
                                   id="User_Ypassword">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3">新密码：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="password" class="input-text" autocomplete="off" placeholder="新密码"
                                   id="User_password">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3">确认密码：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <input type="password" class="input-text" autocomplete="off" placeholder="再次输入新密码"
                                   id="User_NewPassword">
                            <span style="color: red" id="error"></span>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="fun();">确定</button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="plugin/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="plugin/layer/3.0/layer.js"></script>
<script type="text/javascript" src="plugin/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="plugin/pifu/pifu.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script> $(function(){ $(window).on("scroll",backToTopFun); backToTopFun(); }); </script>
<script>
    $(function () {
        //on scolling, show/animate timeline blocks when enter the viewport
        $(window).on('scroll', function () {
            $('.cd-timeline-block').each(function () {
                if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden')) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
                }
                if ($(window).scrollTop() - $(this).offset().top > 0) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden').removeClass('bounce-in');
                }
                
            });
           $('.cd-timeline-block').each(function(){
                if($(this).offset().top < $(window).scrollTop()+$(window).height()*0.75) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden');
                }
            });
        });
    });

</script>
</body>
</html>
